<main>
	<header class="float-left">
		<div class="toolbar">
			<a class="bar-button back-button"><i class="icon icon-back"></i></a>
		</div>
	</header>

	<div class="content">

		<div class="scroll-content dwz-scroll">
			<div class="scroll">

				<div class="dwz-calendar tb-line"></div>

				<ul class="list dwz-list-box"></ul>

			</div>
		</div>

	</div>
</main>

<script id="tpl_list" type="text/html">
	{{each data as item}}
	<li class="item">
		<div class="item-content">
			<div class="item-title1">{{item.type}}</div>
			<div class="item-info1">{{item.time}}</div>
		</div>
		<div class="item-info1 alt">+{{item.score}}分</div>
	</li>
	{{/each}}
</script>

<script type="text/javascript">
	function helper(tpl, params) {
		// console.log(this, tpl, params)
		this.find('.dwz-calendar').calendar({
			viewType: 'week',
			changeDayFn: ($day, value) => {
				console.log($day.dataset(), value);
				if ($day.hasClass('dot')) {
					// 选中某天后，请求当天的事件
					$.ajax({
						type: 'GET',
						url: biz.server.getUrl(biz.server.calendar.dayDetail),
						dataType: 'json',
						data: {
							date: value
						},
						success: (json) => {
							if ($.isAjaxStatusOk(json)) {
								let _html = template.render(tpl.tpl_list, json);
								this.find('.dwz-list-box').html(_html);
							}
						},
						error: $.ajaxError
					});
				} else {
					this.find('.dwz-list-box').html('');
				}
			},

			refreshDayFn: ($days, dateWrap) => {
				console.log($days, dateWrap)

				// 月统计，日历下面的小红点
				$.ajax({
					type: 'POST',
					url: biz.server.getUrl(biz.server.calendar.weekStatistics),
					dataType: 'json',
					data: {
						year: dateWrap.year,
						month: dateWrap.month
					},
					success: (json) => {
						if ($.isAjaxStatusOk(json)) {
							let data = json.data;
							$days.each(function(index) {
								let dayOfWeek = index;
								for (let i = 0; i < data.length; i++) {
									if (dayOfWeek == data[i]) {
										$(this).addClass('dot');
									}
								}
							});
						}
					},
					error: $.ajaxError
				});
			}
		});
	}
</script>